<template>
  <div v-if="divObj.isDivs">
    <MglMarker :coordinates="divObj.coordinates">
      <div slot="marker">
        <i class="iconfont icon-marker" style="font-size:18px"></i>
      </div>
    </MglMarker>
    <MglMarker :coordinates="divObj.coordinates" :draggable="true">
      <div slot="marker" class="division-info">
        <div>地图中心&nbsp;(center)：{{divObj.center}}</div>
        <div>缩放级别&nbsp;(zoom)：{{divObj.zoom}}</div>
      </div>
    </MglMarker>
  </div>
</template>

<script>
import { MglMarker } from "vue-mapbox";
import { mapGetters } from "vuex";
import { watch } from "fs";
export default {
  components: {
    MglMarker
  },
  data() {
    return {
      divObj: {
        isDivs: false,
        coordinates: [],
        zoom: '',
        center: []
      }
    }
  },
  computed: {
    ...mapGetters(['divisionObj'])
  },
  watch: {
    divisionObj: {
      handler(newValue, oldValue) {
        this.divObj = newValue;
      },
      deep: true
    }
  }
}
</script>

<style scoped>
.division-info {
  background-color: rgba(0, 0, 0, 0.66);
  color: #fff;
  font-size: 11px;
  line-height: 18px;
  display: block;
  padding: 5px 10px;
  border-radius: 3px;
  top: -40px;
}
</style>